<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">   
      <div v-if="!errorShow">
        <view-list v-if="field === 'view'" :viewDatas="listDatas[cityId]"></view-list>
        <food-list v-if="field === 'food'" :foodDatas="listDatas[cityId]"></food-list>
        <hotel-list v-if="field === 'hotel'" :hotelDatas="listDatas[cityId]"></hotel-list>
        <massage-list v-if="field === 'massage'" :massageDatas="listDatas[cityId]"></massage-list>
        <ktv-list v-if="field === 'ktv'" :ktvDatas="listDatas[cityId]"></ktv-list>
        <loading :loadingShow="loadingShow"></loading>
      </div>       
      <error :errorShow="errorShow"></error>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll';

import { ListModel } from 'models/list';
import { mapState } from 'vuex';
import ViewList from 'components/ScrollWrapper/ViewList';
import FoodList from 'components/ScrollWrapper/FoodList';
import HotelList from 'components/ScrollWrapper/HotelList';
import MassageList from 'components/ScrollWrapper/MassageList';
import KtvList from 'components/ScrollWrapper/KtvList';
import Loading from 'components/ScrollWrapper/Sub/Loading';
import Error from 'components/ScrollWrapper/Sub/Error';

import tools from 'utils/tools'

export default {
  name: 'ListScrollWrapper',
  components: {
    ViewList,
    FoodList,
    HotelList,
    MassageList,
    KtvList,
    Loading,
    Error
  },
  computed: {
    ...mapState(['cityId', 'field'])
  },
  data () {
    return {
      errorShow: false,
      loadingShow: true,
      listDatas: {}
    }
  },
  watch: {
    cityId () {
      this.getListDatas(this.cityId, this.field)
    }
  },
  mounted () {
    this.scroll = new BetterScroll(this.$refs.wrapper);
    this.getListDatas(this.cityId, this.field)
  },  
  methods: {
    getListDatas (cityId, field) {
      if(!this.listDatas[cityId]) {
        const listModel = new ListModel()
        this.loadingShow = true
        listModel.getListDatas(cityId, field).then(res => {
          if(res && res.status === 0 && res.data) {
            this.errorShow = false
            const data = tools.formatJOSN(res.data, 'keyword')
            setTimeout(() => {
              this.listDatas[cityId] = data;
              this.loadingShow = false
            }, 500);          
          } else {          
            this.errorShow = true
            console.log({
              statusCode: res.status,
              errorMsg: res.error
            })
          }
        })
      }
    }      
  }  
};
</script>

<style lang="scss" scoped>
</style>